<template>
  <div class="width100 ">
    <div class="main_padd">
      <div>
        首页 > 视频案例
      </div>
      <div class="yingyin_list_padd">
        <div class="row justify-content-start align-items-center no-gutters borderbottom_line">
          <div class="yingtu_name back_line">用途分类:</div>

          <div style="margin-left: auto;">123<span class="yellcolorsize">12</span></div>
        </div>
      </div>

      <div class="">
        <div class="row justify-content-around  ">

          <div class="col-12 col-md-12 row indou_padd justify-content-between bg-light">
            <div class=" col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <img width="100%" src="../static/10026.jpg" alt="">
            </div>
            <div class="row  col-12 col-sm-6 col-md-8 col-lg-9 col-xl-10"
              style="flex-direction: column; justify-content: space-between;">
              <div>适合0基础的配音接单平台</div>
              <div>
                练好虚实声，对配音老师来说是相当重要的一环，当然也可以通过程接单途中，一遍工作，一遍成长，这里就不得不推荐一下专业的配音兼职平台了。像课程这边的老师，每天都会在朋友圈发一些有声书录制、小说配音的兼职，基本都是按小时付费的，男女声都有，只要试音通过就可以正式接单。
              </div>
              <div class="">
                <div class="row align-items-center justify-content-between no-gutters">
                  <div class="row align-items-center no-gutters">
                    <div>2022-12-07</div>
                    <div>541次浏览</div>
                  </div>
                  <div>
                    详情
                  </div>

                </div>
              </div>

            </div>
          </div>



        </div>
      </div>

      <div class="">
        <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-center align-items-center">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div>
        132
      </div>
    </div>
  </div>
</template>

<script>
  export default {

  }

</script>

<style>
  .yangyin_Listtwo {
    max-width: calc(16.666% - 12px);
    padding: 0;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 6%);
    border-radius: 6px;
    margin: 12px 0;
    position: relative;
  }

  .padding_room {
    width: calc(100% - 30px);
    margin: 0 auto;
  }

  /* .case_main_child>div>img {
    width: 100%;
    height: 160px;
  } */

  /* .case_main_child {
    margin: 0 !important;
  } */

  /* .yingyin_list_all {
    padding: 0 !important;
    border-bottom: 1px solid #EBEBEB;
  } */

  .back_line {
    line-height: 82px;
    background: #FF6000;
    padding: 0 16px;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
  }

  .yingyin_list_padd {
    padding: 0 30px 0 0 !important;
  }
  .indou_padd{
    padding: 2%;
  }
  @media (max-width: 768px) {

    .indou_padd {
      /* width: calc(100% - 22px); */
      margin: 0 auto;
      padding: 4%;
      box-sizing: border-box;
      box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 6%);
      border-radius: 7px 7px 7px 7px;
    }
  }

</style>
